<template>
  <div class="warp">
    <!-- logo 搜索框 -->
    <div class="header">
      <div class="logo" >
        <img class="logoimg" src="@/assets/images/images_index/logo.png" alt="" />
      </div>
      <div class="inp">
        <van-icon class="ico" name="search" size="15px" />
        <input @click="gotoSearch" class="go_input" type="text" placeholder="搜索商品,共18542件好物" />
      </div>
      <div class="but">
        <van-button color="red" plain size="mini" @click="toLogion">登录</van-button>
      </div>
    </div>

    <!-- 滚动标签栏和下拉列表 -->
    <van-tabs v-model:active="active" class="tabs" color="red" swipeable @change="onClickTab">
      <van-tab title="推荐"></van-tab>
      <van-tab title="居家生活"></van-tab>
      <van-tab title="服饰生活"></van-tab>
      <van-tab title="宠物生活"></van-tab>
      <van-tab title="服饰鞋包"></van-tab>
      <van-tab title="美食酒水"></van-tab>
      <van-tab title="个户清洁"></van-tab>
      <van-tab title="运动旅行"></van-tab>
      <van-tab title="数码家电"></van-tab>
      <van-tab title="严选全球"></van-tab>
    </van-tabs>
    <!-- <router-link to="/home/1">跳转</router-link> -->

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in bigSwiper" :key="index">
        <img class="itemImg" :src="item.picUrl" alt="" />
      </van-swipe-item>
    </van-swipe>

    <!-- icon List -->
    <div class="iocnList">
      <div class="iocnItem" v-for="(item, index) in tagList" :key="index">
        <img class="iocnImg" :src="item.icon" alt="" />
        <span class="iocntext">{{ item.desc }}</span>
      </div>
    </div>

    <!-- nav List -->
    <div class="navList">
      <div class="navItem" v-for="(item, index) in navList" :key="index">
        <img class="itemImg" :src="item.picUrl" alt="" />
        <text class="itemText">{{ item.text }}</text>
      </div>
    </div>

    <!-- main -->
    <div class="main">
      <div class="main_top">
        <van-swipe class="top_swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in miniItem" :key="index">
            <img class="swipeImg" :src="item.picUrl" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="main_middle">
        <div class="middle_item" v-for="(item, index) in newyear" :key="index">
          <img class="item_bgImg" :src="item.picUrl" alt="" />
          <!-- <img class='item_shop' :src="item.itemList.picUrl" alt=""> -->
        </div>
      </div>
    </div>

    <!-- 新人专享 -->
    <div class="newPOP">
      <div class="top">
        <span class="topText">——新人专享礼——</span>
      </div>
      <div class="lr">
        <div class="left">
          <div class="lrText">新人专享红包</div>
          <img class="left_img" src="https://yanxuan.nosdn.127.net/static-union/1648017994dd2933.png" alt="" />
        </div>
        <div class="right">
          <div class="shang">
            <div class="lrText">{{ xinrenT?.title }}</div>
            <img class="right_img" :src="xinrenT?.picUrl" alt="" />
          </div>
          <div class="xia">
            <div class="lrText">{{ xinrenB?.title }}</div>
            <img class="right_img" :src="xinrenB?.picUrl" alt="" />
          </div>
        </div>
      </div>
    </div>

    <!-- 类目热销榜 -->
    <div class="hot">
      <div class="moduleTitle">
        <div class="left">类目热销榜</div>
      </div>
      <div class="content">
        <div class="line1">
          <div class="item-1">
            <div class="name">{{ leimu1?.categoryName }}</div>
            <img class="itemImg" :src="leimu1?.picUrl" alt="" />
          </div>
          <div class="item-2">
            <div class="name">{{ leimu2?.categoryName }}</div>
            <img class="itemImg" :src="leimu2?.picUrl" alt="" />
          </div>
        </div>
        <div class="line2">
          <div class="line2_item" v-for="(item, index) in leimu" :key="index">
            <div class="line2_name">{{ item.categoryName }}</div>
            <img class="line2_img" :src="item.picUrl" alt="" />
          </div>
        </div>
      </div>
    </div>

    <!-- 双图 -->
    <div class="shopping">
      <div class="left">
        <div class="shop_name">11111</div>
        <div class="shop_title">11111</div>
        <div class="shop_img">
          <img class="shop_imgItem" src="@/assets/images/images_index/navlist1.png" alt="" />
        </div>
      </div>
      <div class="left">
        <div class="shop_name">网易严选</div>
        <div class="shop_title">种草攻略</div>
        <div class="shop_img">
          <img class="shop_imgItem" src="@/assets/images/images_index/navlist1.png" alt="" />
          <img class="shop_imgItem" src="@/assets/images/images_index/navlist1.png" alt="" />
        </div>
      </div>
    </div>

    <div class="footer">
          <div class="header">
            <button>下载App</button>
            <button>电脑版</button>

          </div>
          <p>网易公司版权所有 © 1997-2023</p>
          <p>食品经营许可证：JY13301080111719</p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
// @ts-ignore
import { Button, Swipe, SwipeItem, Tab, Tabs } from 'vant'
import router from '@/router'
export default defineComponent({
  name: 'Home',
  components: {
    //让Button 变成 ---- van-button

  }
})
</script>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { homeData } from '@/api/home/home'
import type { indexData } from '@/api/home/home'
const active = ref(0)
const DataList = ref<indexData>()
onMounted(() => {
  Data()
})

async function Data() {
  try {
    const res = await homeData()
    console.log(res);
    
    DataList.value = res.data.data
  } catch (error) {
  }
  // @ts-ignore
  // @ts-ignore
}

const gotoSearch = () => {
    router.push({ path: '/search' })
}

const toLogion = () => {
  router.push('/login')
}

function onClickTab(title: any) {
  router.push({ path: `/index/${title}` })
}

//大轮播图数据
const bigSwiper = computed(() => {
  return DataList.value?.focusList
})
// 三个tag
const tagList = computed(() => {
  return DataList.value?.policyDescList
})
// navList
const navList = computed(() => {
  return DataList.value?.kingKongModule.kingKongList
})
//小轮播
const miniSwiper = computed(() => {
  return DataList.value?.bigPromotionModule.floorList[0]
})
const miniItem = computed(() => {
  return miniSwiper.value?.cells[0].itemList
})
const newyear = computed(() => {
  return DataList.value?.bigPromotionModule.floorList[1].cells
})
// 新人专享礼
const xinrenT = computed(() => {
  return DataList.value?.indexActivityModule[0]
})
const xinrenB = computed(() => {
  return DataList.value?.indexActivityModule[1]
})
// 类目热销榜
const leimu = computed(() => {
  return DataList.value?.categoryHotSellModule.categoryList.slice(2)
})
const leimu1 = computed(() => {
  return DataList.value?.categoryHotSellModule.categoryList[0]
})
const leimu2 = computed(() => {
  return DataList.value?.categoryHotSellModule.categoryList[1]
})
// 底部
const botList = computed(() => {
  return DataList.value?.sceneLightShoppingGuideModule&&DataList.value?.sceneLightShoppingGuideModule[0].styleBanner
})
const botList2 = computed(() => {
  // return DataList.value?.sceneLightShoppingGuideModule[1].styleItem
})
</script>

<style scoped>
.warp {
  width: 100%;
  height: 100%;
}
/* logo 搜索框 */
.header {
  width: 100%;
  height: 44px;
  background-color: white;
  display: flex;
  align-items: center;
  padding: 8px 15px;
  box-sizing: border-box;
}
.logo {
  width: 69px;
  height: 20px;
  margin-right: 10px;
}
.logoimg {
  width: 69px;
  height: 20px;
}
.inp {
  display: flex;
  flex: 1;
  width: 100%;
  height: 28px;
  background-color: #ededed;
  border-radius: 5px;
  align-items: center;
}
.ico {
  margin-left: 15px;
}
.go_input {
  width: 100%;
  height: 20px;
  background-color: #ededed;
  font-size: 14px;
  border: none;
}
.but {
  margin-left: 10px;
  margin-top: -6px;
}

/* 导航栏 */
/* .Tabnav{
  width: 100%;
  height: 30px;
} */
.van-tabs__wrap,
.van-tabs__wrap scroll-view,
.van-tabs__nav,
.van-tab {
  height: 30px !important;
  background-color: white;
}

/* 轮播图 */
.my-swipe .van-swipe-item {
  width: 100%;
  height: 150px;
  color: #fff;
}
.itemImg {
  width: 100%;
  height: 100%;
}

/* iocnList */
.iocnList {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  justify-content: space-around;
  box-sizing: border-box;
}
.iocnList .iocnItem {
  display: flex;
  align-items: center;
}
.iocnList .iocnImg {
  width: 16px;
  height: 16px;
}
.iocnList .iocntext {
  margin: 0 4px;
  font-size: 12px;
}

/* nav List */
.navList {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.navList .navItem {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 20%;
  align-items: center;
}
.navList .itemImg {
  width: 55px;
  height: 55px;
  margin: 10px 0;
}
.navList .itemText {
  font-size: 12px;
}

/* main 年货补贴 */
.main {
  width: 100%;
  height: 255px;
}
.main .main_top {
  width: 100%;
  height: 100px;
  background-image: url('https://yanxuan.nosdn.127.net/static-union/168059808822a8e6.gif');
  background-size: 100% 100%;
}
.main .main_top .top_swipe {
  float: left;
  width: 84px;
  height: 84px;
  margin-left: 37px;
  margin-top: 5px;
}
.main .main_top .swipeImg {
  width: 100%;
  height: 100%;
}

.main .main_middle {
  width: 100%;
  height: 110px;
  display: flex;
  justify-content: space-around;
}
.main .main_middle .middle_item {
  width: 33.333%;
  height: 110px;
  display: flex;
  justify-content: space-around;
}
.main .main_middle .middle_item .item_bgImg {
  width: 115px;
  height: 110px;
  background-image: url('https://yanxuan-item.nosdn.127.net/85918b3f3b7dc4525c0a160d6f7fa650.png?quality=75&type=webp&imageView&thumbnail=160x160');
  /* z-index: 999; */
}

/* .main_bottom{
  width: 100%;
  height: 40px;
}
.main_bottom .bottomImg{
  width: 100%;
  height: 100%;
} */

/* 新人专享 */
.newPOP {
  width: 100%;
  height: 280px;
  box-sizing: border-box;
  padding: 0 15px;
}
.newPOP .top {
  width: 100%;
  height: 45px;
  text-align: center;
  line-height: 45px;
  font-size: 18px;
}
.lr {
  display: flex;
}
.newPOP .left {
  background-color: #f9e9cf;
  width: 50%;
  height: 235px;
}
.left_img {
  display: block;
  width: 129px;
  height: 128px;
  margin: 20px;
}
.newPOP .right {
  box-sizing: border-box;
  width: 50%;
  height: 235px;
  display: flex;
  flex-wrap: wrap;
  margin-left: 2px;
}
.right_img {
  width: 100px;
  height: 100px;
  float: right;
  margin-top: 15px;
}
.newPOP .right .shang {
  width: 100%;
  height: 50%;
  background-color: #fbe2d3;
}
.newPOP .right .xia {
  box-sizing: border-box;
  padding-top: 2px;
  width: 100%;
  height: 50%;
  background-color: #ffecc2;
}
.lrText {
  display: inline-block;
  font-size: 14px;
  padding: 15px 0 0 10px;
}

/* 类目热销榜 */
.hot {
  margin-top: 25px;
  padding: 0 15px;
}
.hot .moduleTitle .left {
  font-size: 18px;
}

.line1 {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.item-1 {
  width: 170px;
  height: 100px;
  background-color: #f9f3e4;
  display: flex;
}
.item-2 {
  width: 170px;
  height: 100px;
  background-color: #ebeff6;
  display: flex;
}
.name {
  display: inline-block;
  line-height: 100px;
  font-size: 14px;
}
.line1 .itemImg {
  width: 100px;
  height: 100px;
}
.line2 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.line2_item {
  box-sizing: border-box;
  width: 23.55%;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  margin-top: 5px;
  margin-right: 5px;
}
.line2_name {
  margin-top: 5px;
  text-align: center;
  font-size: 12px;
}
.line2_img {
  width: 60px;
  height: 60px;
  margin: 0 auto;
}
.shopping {
  box-sizing: border-box;
  width: 100%;
  height: 132px;
  padding: 0 15px;
  display: flex;
  margin-top: 20px;
}
.shopping .left {
  width: 50%;
  height: 100%;
  margin-left: 2px;
  background-color: #ebeff6;
}
.shopping .left .shop_name {
  padding: 10px 0 0 10px;
  font-size: 18px;
}
.shopping .left .shop_title {
  padding: 10px 0 0 10px;
  font-size: 14px;
  color: #ff6f0f;
}
.shop_img {
  display: flex;
  justify-content: space-around;
}
.shop_imgItem {
  width: 75px;
  height: 75px;
}
/* foot */
.footer{
  height: 122px;
  background-color: #333333;
  margin-top: 30px;
  box-sizing: border-box;
  padding-top: 20px;
  margin-bottom: 35px;
}
 .footer .header{
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
  background-color: #333333;
}
.footer .header button{
  border: 1px solid white;
  border-radius: 3px;
  color: white;
  background-color: #333333;
  font-size: 10px;
  width: 86px;
  height: 31px;
}
.footer .header button:first-child{
  margin-right: 10px;
}
.footer p {
  text-align: center;
  font-size: 10px;
  color: #999999;
}
</style>
